<template>
  <a-layout class="app-layout">
    <a-layout-sider v-model:collapsed="collapsed" collapsible width="256" :trigger="null" class="app-sider">
      <div class="logo">
        <img src="@/assets/logo.svg" alt="医学检测系统" />
        <h1 v-if="!collapsed">医学检测系统</h1>
      </div>
      <a-menu theme="dark" mode="inline" v-model:selectedKeys="selectedKeys">
        <a-menu-item key="workbench">
          <router-link to="/dashboard/workbench">
            <pie-chart-outlined />
            <span>工作台</span>
          </router-link>
        </a-menu-item>
        <a-sub-menu key="system">
          <template #title>
            <span>
              <user-outlined />
              <span>系统管理</span>
            </span>
          </template>
          <a-menu-item key="tenant-management">
            <router-link to="/dashboard/tenant-management">租户管理</router-link>
          </a-menu-item>
          <a-menu-item key="user-permission">
            <router-link to="/dashboard/user-permission">用户权限</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="knowledge">
          <template #title>
            <span>
              <book-outlined />
              <span>知识库</span>
            </span>
          </template>
          <a-menu-item key="knowledge-base">
            <router-link to="/dashboard/knowledge-base">知识库管理</router-link>
          </a-menu-item>
          <a-menu-item key="knowledge-documents">
            <router-link to="/dashboard/knowledge-documents">知识库文档</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="report">
          <template #title>
            <span>
              <file-text-outlined />
              <span>报告管理</span>
            </span>
          </template>

          <a-menu-item key="report-generation">
            <router-link to="/dashboard/report-generation">报告生成</router-link>
          </a-menu-item>
          <a-menu-item key="report-list">
            <router-link to="/dashboard/report-list">报告列表</router-link>
          </a-menu-item>
          <a-menu-item key="report-collaboration">
            <router-link to="/dashboard/report-collaboration">报告协同</router-link>
          </a-menu-item>
          <a-menu-item key="quality-control">
            <router-link to="/dashboard/quality-control">审核质控</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-menu-item key="patient-report">
          <router-link to="/dashboard/patient-report">
            <solution-outlined />
            <span>患者报告</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="medical-qa">
          <router-link to="/dashboard/medical-qa">
            <message-outlined />
            <span>医学检测问答</span>
          </router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout :class="['app-content', collapsed ? 'collapsed' : '']">
      <a-layout-header class="app-header">
        <div class="header-left">
          <menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
          <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
          <a-breadcrumb style="margin-left: 16px">
            <a-breadcrumb-item>首页</a-breadcrumb-item>
            <a-breadcrumb-item>{{ getCurrentRouteName() }}</a-breadcrumb-item>
          </a-breadcrumb>
        </div>
        <div class="header-right">
          <a-space size="middle">
            <a-tooltip>
              <template #title>使用文档</template>
              <question-circle-outlined class="action-icon" />
            </a-tooltip>
            <a-badge count="5">
              <bell-outlined class="action-icon" />
            </a-badge>
            <a-dropdown>
              <div class="avatar-dropdown">
                <a-avatar style="background-color: #87d068">
                  <template #icon><user-outlined /></template>
                </a-avatar>
                <span class="avatar-name">管理员</span>
              </div>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="1">
                    <user-outlined />个人信息
                  </a-menu-item>
                  <a-menu-item key="2">
                    <setting-outlined />系统设置
                  </a-menu-item>
                  <a-menu-divider />
                  <a-menu-item key="3">
                    <logout-outlined />退出登录
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </a-space>
        </div>
      </a-layout-header>
      <a-layout-content class="app-main">
        <div class="main-container">
          <router-view />
        </div>
      </a-layout-content>
      <a-layout-footer class="app-footer">
        Med AI ©2024 Created by MED AI TEAM
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import { ref, watch, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  PieChartOutlined,
  UserOutlined,
  BookOutlined,
  FileTextOutlined,
  SolutionOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  QuestionCircleOutlined,
  BellOutlined,
  SettingOutlined,
  LogoutOutlined,
  MessageOutlined
} from '@ant-design/icons-vue'

const route = useRoute()
const router = useRouter()
const collapsed = ref<boolean>(false)
const selectedKeys = ref<string[]>(['workbench'])

// 获取当前路由的名称
const getCurrentRouteName = () => {
  const pathParts = route.path.split('/')
  const currentPath = pathParts[pathParts.length - 1]

  const routeMap: Record<string, string> = {
    'workbench': '工作台',
    'tenant-management': '租户管理',
    'user-permission': '用户权限',
    'knowledge-base': '知识库管理',
    'report-generation': '报告生成',
    'report-list': '报告列表',
    'report-collaboration': '报告协同',
    'quality-control': '审核质控',
    'patient-report': '患者报告',
    'medical-qa': '医学检测问答'
  }

  return routeMap[currentPath] || '工作台'
}

// 根据当前路由更新选中的菜单项
const updateSelectedKeys = () => {
  const pathParts = route.path.split('/')
  const currentPath = pathParts[pathParts.length - 1]
  selectedKeys.value = [currentPath]
}

onMounted(updateSelectedKeys)

watch(() => route.path, updateSelectedKeys)
</script>

<style scoped>
.app-layout {
  min-height: 100vh;
  width: 100%;
}

.app-sider {
  overflow: auto;
  height: 100vh;
  position: fixed;
  left: 0;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  z-index: 10;
}

.logo {
  height: 64px;
  display: flex;
  align-items: center;
  padding-left: 24px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.logo img {
  width: 32px;
  height: 32px;
}

.logo h1 {
  height: 32px;
  margin: 0 0 0 12px;
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  line-height: 32px;
  vertical-align: middle;
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.app-content {
  margin-left: 256px;
  transition: margin 0.2s;
  width: calc(100% - 256px);
}

.app-content.collapsed {
  margin-left: 80px;
  width: calc(100% - 80px);
}

.app-header {
  padding: 0 24px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  position: sticky;
  top: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  line-height: 64px;
  width: 100%;
}

.header-left,
.header-right {
  display: flex;
  align-items: center;
}

.trigger {
  font-size: 18px;
  line-height: 64px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #00b96b;
}

.action-icon {
  padding: 0 12px;
  font-size: 16px;
  cursor: pointer;
}

.avatar-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 12px;
}

.avatar-name {
  margin-left: 8px;
}

.app-main {
  padding: 24px;
  min-height: calc(100vh - 64px - 70px);
  background: #f0f2f5;
  width: 100%;
}

.main-container {
  background: #fff;
  padding: 24px;
  border-radius: 4px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
  width: 100%;
}

.app-footer {
  text-align: center;
  background: #fff;
  padding: 16px 50px;
  color: rgba(0, 0, 0, 0.45);
  width: 100%;
}

:deep(.ant-menu-item a) {
  color: rgba(255, 255, 255, 0.65);
}

:deep(.ant-menu-item-selected a) {
  color: #fff;
}
</style>